<template>
  <div class="shujutiqu_wrap">
    <div class="database">
      <div class="top_header_wrap">
        <topHeader @clearData="clearAllData" />
      </div>
      <div
        style="
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          padding: 18px;
          display: flex;
          justify-content: space-between;
        "
      >
        <!-- 左侧内容 -->
        <div class="left_wrap">
          <div class="common_title">
            <div class="common_title_name">文件管理</div>
            <div class="common_title_btns">
              <div class="title_btn_item">
                <el-button
                  class="bin_button calcImport"
                  @click="onDaoruBtnFn"
                  type="primary"
                  >导入</el-button
                >
              </div>
              <!-- <div class="title_btn_item">
            <el-button class="bin_button clearImport"
                       @click="onClearLeftTreeFn"
                       type="primary">清空</el-button>
          </div> -->
            </div>
          </div>
          <div class="left_list_wrap">
            <div class="left_list">
              <el-collapse class="bin_collapse">
                <el-collapse-item
                  v-for="item in leftList"
                  :key="item.dataTypeId"
                  :title="item.dataTypeName"
                  :name="item.dataTypeId"
                >
                  <el-collapse class="bin_collapse_sm">
                    <el-collapse-item
                      v-for="item2 in item.dataTypeVoList"
                      :key="item2.dataTypeId"
                      :title="item2.dataTypeName"
                      :name="item2.dataTypeId"
                      :disabled="item2.dataTypeVoList.length <= 0"
                    >
                      <div class="left_tree_list">
                        <div
                          :class="[
                            'left_item',
                            currentLeftListItem.id === item3.id && 'act',
                          ]"
                          v-for="item3 in item2.dataTypeVoList"
                          :key="item3.id"
                          @click="changeCurrentLeftListItemFn(item3)"
                        >
                          {{ item3.dataTableName }}
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="right_wrap">
          <!-- 数据内容区域 -->
          <div class="shuju_content" ref="shujuContent">
            <div class="common_title">
              <div class="common_title_name">数据</div>
              <div class="common_title_btns">
                <div class="title_btn_item">
                  <el-button
                    class="bin_button"
                    icon="el-icon-edit"
                    @click="onEditTableHeaderFn"
                    type="primary"
                    >修改表头</el-button
                  >
                </div>
                <div class="title_btn_item">
                  <el-button
                    class="bin_button new_icon_imp"
                    @click="onYuanshujuDialogFn"
                    type="primary"
                    >元数据摘取</el-button
                  >
                </div>
                <div class="title_btn_item">
                  <el-button
                    class="bin_button addBtnexport"
                    @click="onDaochuDialogFn('shuju')"
                    type="primary"
                    >导出</el-button
                  >
                </div>
              </div>
            </div>
            <div
              class="shuju_table_wrap"
              v-if="Object.keys(shujuTableOptions).length"
            >
              <div class="shuju_table">
                <el-table
                  class="bin_table"
                  :border="true"
                  style="width: 100%"
                  :height="tableH"
                  :data="shujuTableData"
                  @selection-change="handleShujuTableSelectionChangeFn"
                >
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column
                    min-width="170"
                    :prop="item.columnCode"
                    :label="item.columnName"
                    v-for="item in shujuTableOptions"
                    sortable
                    :key="item.dataColumnId"
                  >
                  </el-table-column>
                  <el-table-column label="操作" min-width="140" align="center">
                    <template slot-scope="scope">
                      <div class="caozuo_btns">
                        <div
                          class="icon el-icon-delete"
                          @click="onShujuItemDeleteFn(scope.row)"
                        ></div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="shuju_fenye">
                <div class="pageBox">
                  <!-- <div class="pageInfo">
                    <span class="size">{{ shujuSize }}</span>
                    <span>条每页，共{{ shujuTotal }}条</span>
                  </div> -->
                  <!-- :pager-count="5" -->
                  <!-- layout=" prev, pager, next" -->
                  <!-- :page-size="shujuSize" -->
                  <el-pagination
                    class="bin_fenyeqi"
                    :current-page.sync="shujuPage"
                    :page-sizes="[10, 50, 100, 200, 500, 1000]"
                    prev-text="上一页"
                    next-text="下一页"
                    popper-class="bin_fenyeqi_popper"
                    layout="total, sizes,->,prev, pager, next"
                    @current-change="changeShujuFenyeFn"
                    @size-change="changeShujuFenyeSizeChange"
                    :total="shujuTotal"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
          <!-- 摘取数据内容区域 -->
          <div class="zhaiqu_content">
            <div class="common_title">
              <div class="common_title_name">摘取数据</div>
              <div class="common_title_btns">
                <div class="title_btn_item">
                  <el-button
                    class="bin_button addBtnexport"
                    @click="onDaochuDialogFn('zhaiqu')"
                    type="primary"
                    >导出</el-button
                  >
                </div>
              </div>
            </div>
            <div
              class="zhaiqu_table_wrap"
              v-if="Object.keys(zhaiquTableOptions).length"
            >
              <div class="zhaiqu_table">
                <el-table
                  class="bin_table"
                  :border="true"
                  style="width: 100%"
                  :height="tableH"
                  :data="zhaiquTableData"
                  @selection-change="handleZhaiquTableSelectionChangeFn"
                >
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column
                    min-width="170"
                    :prop="item.columnCode"
                    :label="item.columnName"
                    v-for="item in zhaiquTableOptions"
                    sortable
                    :key="item.metadataDictyColId"
                  >
                  </el-table-column>
                  <el-table-column label="操作" min-width="140" align="center">
                    <template slot-scope="scope">
                      <div class="caozuo_btns">
                        <div
                          class="icon el-icon-delete"
                          @click="onZhaiquItemDeleteFn(scope.row)"
                        ></div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="zhaiqu_fenye">
                <div class="pageBox">
                  <!-- <div class="pageInfo">
                    <span class="size">{{ zhaiquSize }}</span>
                    <span>条每页，共{{ zhaiquTotal }}条</span>
                  </div> -->
                  <!-- :page-size="zhaiquSize" -->
                  <!-- layout=" prev, pager, next" -->
                  <el-pagination
                    class="bin_fenyeqi"
                    :current-page.sync="zhaiquPage"
                    :page-sizes="[10, 50, 100, 200, 500, 1000]"
                    :pager-count="5"
                    prev-text="上一页"
                    next-text="下一页"
                    popper-class="bin_fenyeqi_popper"
                    layout="total, sizes,->,prev, pager, next"
                    @current-change="changeZhaiquFenyeFn"
                    @size-change="changeZhaiquFenyeSizeChange"
                    :total="zhaiquTotal"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导入文件弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="导入文件"
      :visible.sync="daoruDialogFlag"
      class="bin_dialog daoru_dialog dialog-1000"
      width="70%"
      @close="resetDaoruDialogDataFn"
      top="10vh"
    >
      <div class="daoru_dialog_content">
        <div class="search_wrap">
          <div class="search_item">
            <div class="name">文件类型：</div>
            <div class="ipt">
              <el-cascader
                :options="fileTypeOptions"
                class="bin_cascader"
                popper-class="bin_cascader_popper"
                :props="fileTypeProps"
                v-model="fileType"
                collapse-tags
                @change="ysjtqGetDaoruTableListFn"
                clearable
              >
              </el-cascader>
            </div>
          </div>
          <div class="search_item">
            <div class="name">表名称：</div>
            <div class="ipt">
              <el-input
                class="bin_input"
                v-model="fileNameVal"
                placeholder="请输入内容"
                @change="ysjtqGetDaoruTableListFn"
              ></el-input>
            </div>
          </div>
          <div class="search_btn">
            <el-button
              type="primary"
              size="medium"
              class="bin_button"
              @click="ysjtqGetDaoruTableListFn"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="dialog_table_wrap">
          <el-table
            class="bin_table"
            :border="true"
            style="width: 100%"
            height="55vh"
            ref="daoru_dialog_ref"
            :data="dialogTableData"
            @selection-change="handleDaoruTableSelectionChangeFn"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column min-width="170" prop="dataTypeId" label="表编码">
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="dataTableName"
              label="表名称"
            >
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="dialog_fenye_wrap">
          <div class="pageBox">
            <div class="pageInfo">
              <span class="size">{{ dialogDaoruPageSize }}</span>
              <span>条每页，共{{dialogDaoruPageTotal}}条</span>
            </div>
            <el-pagination class="bin_fenyeqi"
                           :current-page.sync="dialogDaoruPage"
                           :page-size="dialogDaoruPageSize"
                           :pager-count="5"
                           prev-text="上一页"
                           next-text="下一页"
                           popper-class="bin_fenyeqi_popper"
                           layout=" prev, pager, next"
                           @current-change="ysjtqGetDaoruTableListFn"
                           :total="dialogDaoruPageTotal">
            </el-pagination>
          </div>
        </div> -->
        <div class="dialog_main_btns">
          <el-button
            type="primary"
            class="bin_button"
            @click="onDaoruDialogCancelFn"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="bin_button"
            @click="onDaoruDialogSubmitFn"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 元数据摘取弹窗 不要了 -->
    <el-dialog
      v-zsdialogDrag
      title="元数据摘取"
      :visible.sync="zhaiquDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog no_padding"
      width="50%"
      @close="resetZhaiquDialogDataFn"
      top="10vh"
    >
      <div class="zhaiqu_dialog_wrap">
        <div class="zhaiqu_dialog_title">数据类型：</div>
        <div class="zhaiqu_dialog_main">
          <div
            :class="[
              'zhaiqu_list',
              onZhaiquZongActClassFn(list),
              list.isPush && 'push_box',
            ]"
            v-for="list in zhaiquDialogList"
            :key="list.id"
            @click="isPushListContentFn(list)"
          >
            <div class="zhaiqu_list_zong">
              <div class="zong_left">
                <div class="sqr" @click="onCheckoutZhaiquListFn(list)"></div>
                <div class="name">{{ list.name }}</div>
              </div>
              <div class="zong_right">
                <div class="icon el-icon-caret-bottom"></div>
              </div>
            </div>
            <div class="zhaiqu_list_content">
              <div
                :class="['zhaiqu_list_item', item.isCheck && 'actItem']"
                v-for="item in list.childern"
                :key="item.id"
              >
                <div
                  class="sqr"
                  @click="onCheckoutZhaiquItemFn(list, item)"
                ></div>
                <div class="name">{{ item.metadataDictyTableName }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="zhaiqu_dialog_btns">
          <el-button
            type="primary"
            class="bin_button"
            @click="zhaiquDialogCancelFn"
            plain
            >取消</el-button
          >
          <el-button
            type="primary"
            class="bin_button"
            @click="zhaiquDialogSubmitFn"
            plain
            >开始摘取</el-button
          >
        </div>
        <div class="zhaiqu_dialog_load" v-show="zhaiquDialogLoadStatus">
          <div
            class="load_item load_ing"
            v-show="zhaiquDialogLoadStatus === 'ing'"
          >
            <div class="icon el-icon-loading"></div>
            <div>摘取中</div>
          </div>
          <div
            class="load_item load_succ"
            v-show="zhaiquDialogLoadStatus === 'succ'"
          >
            <div>摘取完成</div>
          </div>
          <div
            class="load_item load_fail"
            v-show="zhaiquDialogLoadStatus === 'fail'"
          >
            <div>摘取失败</div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 导出弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="导出"
      :visible.sync="daochuDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog"
      width="50%"
      top="10vh"
      @closed="cancelDaochuFn"
    >
      <div class="daochu_wrap">
        <div class="daochu_type">
          <div class="type_title">导出类型:</div>
          <div class="type_ipt">
            <el-radio-group
              class="bin_radio"
              v-model="daochuType"
              @change="aaa()"
            >
              <el-radio :label="'1'">本地</el-radio>
              <el-radio :label="'2'" v-if="isClickDaochuType !== 'shuju'"
                >数据库</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <div class="daochu_shujuku_wrap" v-if="daochuType === '2'">
          <div class="daochu_shujuku_type">
            <div class="type_title">导出到:</div>
            <div class="type_ipt">
              <el-radio-group class="bin_radio" v-model="daochuShujukuType">
                <el-radio :label="'1'">现有表单</el-radio>
                <!-- <el-radio :label="'2'">新建表单</el-radio> -->
              </el-radio-group>
            </div>
          </div>
          <div class="daochu_shujuku_main">
            <div class="shujuku_tree_title">现有表单:</div>
            <div class="shujuku_tree_wrap">
              <div class="bin_tree_main">
                <el-tree
                  class="bin_tree"
                  :props="defaultProps"
                  :load="loadNodeFn"
                  @node-click="shujutreeNodeClickFn"
                  lazy
                >
                  <div class="custom-tree-node" slot-scope="{ node, data }">
                    <div class="custom_title">{{ node.label }}</div>
                    <div
                      class="custom_btns"
                      v-show="daochuShujukuType === '2' && node.level === 2"
                    >
                      <el-button
                        type="text"
                        size="mini"
                        class="bin_button"
                        icon="el-icon-circle-plus"
                        @click="appendTreeNodeFn(data)"
                      >
                        新建
                      </el-button>
                    </div>
                  </div>
                </el-tree>
              </div>
            </div>
          </div>
        </div>
        <div class="daochu_btns">
          <el-button type="primary" class="bin_button" @click="cancelDaochuFn"
            >取消</el-button
          >
          <el-button type="primary" class="bin_button" @click="startDaochuFn"
            >开始导出</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 编辑表头弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="修改表头"
      :visible.sync="editTableHeaderDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog edit_header_dialog dialog-1000"
      width="60%"
      top="10vh"
    >
      <div class="edit_header_table_wrap" v-if="shujuTableOptions.length">
        <div class="edit_header_table_content">
          <div
            class="header_item"
            v-for="item in shujuTableOptions"
            :key="item.excelColumnId"
          >
            <div class="header_item_name">{{ item.columnName }}</div>
            <div class="header_item_ctr">修改为：</div>
            <div class="header_ipt">
              <el-input
                v-model="item.newValue"
                class="bin_input"
                placeholder="请输入修改后的新值"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="edit_btns_wrap">
          <el-button
            type="primary"
            class="bin_button"
            @click="onEditHeaderDialogCancelFn"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="bin_button"
            @click="onEditHeaderDialogSaveFn"
            >保存</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 导出弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="元数据摘取"
      :visible.sync="daochuDialogFlag1"
      :closeOnClickModal="false"
      class="bin_dialog yuandata_dialog dialog-1000"
      width="50%"
      top="10vh"
    >
      <daochux
        v-if="daochuDialogFlag1"
        :daoruTableId="leftSelectId"
        @zhaiquDialogSubmitFn="zhaiquDialogSubmitFn"
        :rongheTableId="fusionId"
        :zhaiquDialogLoadStatus="zhaiquDialogLoadStatus"
        :selected="mainTableSelectedId"
        @close="daochuDialogFlag1 = false"
      ></daochux>
    </el-dialog>
  </div>
</template>

<script>
import { fileDaoChuUtils } from "../../../utils/utils.js";
import topHeader from "../components/topHeader.vue";
import daochux from "../components/daochux.vue";
export default {
  components: { topHeader, daochux },
  data() {
    return {
      daochuDialogFlag1: false,
      leftSelectId: "",
      fusionId: "",
      mainTableSelectedId: [],
      daoruDialogFlag: false, //导入弹窗
      fileType: "", // 导入的文件类型
      fileTypeOptions: [],
      fileTypeProps: {
        value: "dataTypeId",
        label: "dataTypeName",
        children: "dataTypeVoList",
      },
      fileNameVal: "", //导入的文件名称
      dialogTableData: [], //导入文件的table
      currentDialogTableItemArray: [], //导入的table-选中项
      dialogDaoruPage: 1,
      dialogDaoruPageSize: 10,
      dialogDaoruPageTotal: 0,
      currentLeftListItem: {}, //左侧选中项
      leftList: [], //左侧项
      shujuTableData: [], //数据table
      shujuTableOptions: [], //数据的自定义标题头
      currentShujuTableItemArray: [], //勾选的数据集合
      tableH: 0,
      tableHDaoRu: 0,
      shujuPage: 1,
      shujuSize: 10,
      shujuTotal: 0,
      zhaiquDialogFlag: false,
      zhaiquDialogLoadStatus: "",
      zhaiquDialogList: [],
      zhaiquTableData: [],
      zhaiquTableOptions: [], //摘取的自定义标题头
      currentZhaiquTableItemArray: [], //勾选的摘取数据集合
      zhaiquPage: 1,
      zhaiquSize: 10,
      zhaiquTotal: 0,
      daochuDialogFlag: false,
      isClickDaochuType: "", // 'shuju' 'zhaiqu'
      daochuType: "1",
      daochuShujukuType: "1",
      shujukuTreeData: [],
      currentTreeItem: null,
      defaultProps: {
        children: "dataTypeVoList",
        label: "dataTypeName",
        isLeaf: "leaf",
      },
      editTableHeaderDialogFlag: false,
      notChange: false,
    };
  },
  mounted() {
    this.ysjtqGetFileTypeFn();
    this.ysjtqGetZhaiquDialogListFn();
    this.fetTableHeight();
  },
  watch: {
    currentDialogTableItemArray(val) {
      console.log(val);
    },
  },
  methods: {
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~左侧功能~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 获取导入文件的select-type
    async ysjtqGetFileTypeFn() {
      let res = await this.$api.ysjtqGetFileTypeApi(1);
      this.fileTypeOptions = res.result.map((item) => {
        return {
          dataTypeId: item.databaseType,
          ...item,
          dataTypeName: item.databaseTypeName,
        };
      });
      await this.ysjtqGetLeftListFn();
    },
    // 获取左侧数据
    async ysjtqGetLeftListFn() {
      let res = await this.$api.ysjtqGetLeftListApi();
      let newFileTypeOptions = JSON.parse(JSON.stringify(this.fileTypeOptions));
      this.leftList = newFileTypeOptions.map((item) => {
        let newDataTypeVoList = item.dataTypeVoList.map((item1) => {
          item1.dataTypeVoList = res.result.flatMap((item2) => {
            if (item1.dataTypeId === item2.dataTypeId) {
              return [item2];
            } else {
              return [];
            }
          });
          return item1;
        });
        return { ...item, dataTypeVoList: newDataTypeVoList };
      });
    },
    clearAllData() {
      this.$api.ysjtqClearLeftTreeListApi().then(() => {
        this.ysjtqGetLeftListFn();
        this.daoruDialogFlag = false;
        this.shujuTableData = [];
        this.zhaiquTableData = [];
        this.shujuTableOptions = [];
        this.zhaiquTableOptions = [];
        this.currentShujuTableItemArray = [];
        this.currentZhaiquTableItemArray = [];
        this.shujuPage = 1;
        this.zhaiquPage = 1;
        this.shujuSize = 10;
        this.zhaiquSize = 10;
        this.shujuTotal = 0;
        this.zhaiquTotal = 0;
        this.$message({
          type: "success",
          message: "清空成功!",
        });
      });
    },
    // 清空左侧树
    onClearLeftTreeFn() {
      this.$confirm("是否清空左侧导入数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.ysjtqClearLeftTreeListApi().then(() => {
          this.ysjtqGetLeftListFn();
          this.daoruDialogFlag = false;
          this.shujuTableData = [];
          this.zhaiquTableData = [];
          this.shujuTableOptions = [];
          this.zhaiquTableOptions = [];
          this.currentShujuTableItemArray = [];
          this.currentZhaiquTableItemArray = [];
          this.shujuPage = 1;
          this.zhaiquPage = 1;
          this.shujuSize = 10;
          this.zhaiquSize = 10;
          this.shujuTotal = 0;
          this.zhaiquTotal = 0;
          this.$message({
            type: "success",
            message: "清空成功!",
          });
        });
      });
    },
    // 左侧树的点击事件 .
    changeCurrentLeftListItemFn(item) {
      if (item.id !== this.currentLeftListItem.id) {
        this.currentLeftListItem = item;
        this.ysjtqGetTableListFn(true);
        this.ysjtqGetShujuZhaiquDataListFn(true);
      }
    },
    // 文件管理导入按钮
    onDaoruBtnFn() {
      this.daoruDialogFlag = true;
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~导入弹窗功能~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 导入弹窗中搜索按钮---table获取
    async ysjtqGetDaoruTableListFn() {
      if (this.fileType.length) {
        this.currentDialogTableItemArray = [];
        let params = {
          databaseType: this.fileType[0],
          dataTypeId: this.fileType[1],
          fileName: this.fileNameVal,
        };
        let res = await this.$api.ysjtqGetDaoruTableListApi(params);
        this.currentLeftListItem = {};
        this.dialogTableData = res.result;
      } else {
        this.$message({
          message: "请先选择文件类型~",
          type: "warning",
        });
      }
    },
    // 导入弹窗的多选check
    handleDaoruTableSelectionChangeFn(val) {
      this.currentDialogTableItemArray = val;
    },
    // 导入弹窗的取消
    onDaoruDialogCancelFn() {
      this.daoruDialogFlag = false;
    },
    // 导入弹窗的确认
    async onDaoruDialogSubmitFn() {
      if (this.currentDialogTableItemArray.length) {
        await this.ysjtqDaoruDialogCheckTableItemFn();
      } else {
        this.$message({
          message: "请先勾选数据~",
          type: "warning",
        });
      }
    },
    // 导入弹窗勾选后点确认
    async ysjtqDaoruDialogCheckTableItemFn() {
      let data = this.currentDialogTableItemArray.map(
        (item) => item.dataTableId
      );
      let res = await this.$api.ysjtqDaoruDialogCheckTableItemApi(data);
      if (res.code === 200) {
        await this.ysjtqGetLeftListFn();
        this.daoruDialogFlag = false;
        this.zhaiquTableData = [];
        this.zhaiquTableOptions = []; //摘取的自定义标题头
        this.currentZhaiquTableItemArray = []; //勾选的摘取数据集合
        this.zhaiquPage = 1;
        this.zhaiquSize = 10;
        this.zhaiquTotal = 0;
        this.$message({
          message: "导入成功~",
          type: "success",
        });
      }
    },
    // 关闭导入dialog时候的数据重置
    resetDaoruDialogDataFn() {
      this.currentDialogTableItemArray = [];
      this.$refs.daoru_dialog_ref.clearSelection();
      this.dialogTableData = [];
      this.fileType = "";
      this.fileNameVal = "";
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~原始数据栏~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 分页查询原始数据
    async ysjtqGetTableListFn(flag) {
      if (flag) {
        // 有flag就走获取列表头的接口
        const RowDataArr = await this.ysjtqGetTableHeaderRowFn(
          this.currentLeftListItem.id,
          "0"
        );
        this.shujuTableOptions = RowDataArr;
      }
      const ResData = await this.ysjtqGetTableListDataFn(
        this.currentLeftListItem.id,
        "0",
        this.shujuPage,
        this.shujuSize
      );
      this.shujuTableData = ResData.result.list.map((item) => {
        return { ...item, ...JSON.parse(item.dataInfo) };
      });
      this.shujuTotal = ResData.result.total;
    },
    // 原始数据的分页page-fn
    changeShujuFenyeFn(val) {
      this.shujuPage = val;
      this.ysjtqGetTableListFn();
    },

    // 原始数据的分页选择器page-
    changeShujuFenyeSizeChange(val) {
      this.shujuPage = 1;
      this.shujuSize = val;
      this.ysjtqGetTableListFn();
    },
    // 原始数据的单向删除
    onShujuItemDeleteFn(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await this.ysjtqRemoveTableItemFn("0", item.id);
        this.shujuPage = 1;
        this.ysjtqGetTableListFn();
      });
    },
    // 原始数据table的多选check
    handleShujuTableSelectionChangeFn(val) {
      this.currentShujuTableItemArray = val;
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~摘取数据栏 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 分页查询摘取数据
    async ysjtqGetShujuZhaiquDataListFn(flag, dialogFalg) {
      if (flag) {
        // 有flag就走获取列表头的接口
        const RowDataArr = await this.ysjtqGetTableHeaderRowFn(
          this.currentLeftListItem.id,
          "1"
        );
        this.zhaiquTableOptions = RowDataArr;
      }
      const ResData = await this.ysjtqGetTableListDataFn(
        this.currentLeftListItem.id,
        "1",
        this.zhaiquPage,
        this.zhaiquSize
      );
      try {
        if (ResData.code === 200) {
          if (dialogFalg) {
            this.zhaiquDialogLoadStatus = "succ";
          }
          this.zhaiquTableData = ResData.result.list.map((item) => {
            return { ...item, ...JSON.parse(item.extractDataJson) };
          });
          this.zhaiquTotal = ResData.result.total;
        } else {
          if (dialogFalg) {
            this.zhaiquDialogLoadStatus = "fail";
          }
        }
      } catch {
        if (dialogFalg) {
          this.zhaiquDialogLoadStatus = "fail";
        }
      }
    },
    // 摘取数据的分页page-fn
    changeZhaiquFenyeFn() {
      this.zhaiquPage = val;
      this.ysjtqGetShujuZhaiquDataListFn();
    },
    // 摘取数据的分页选择器
    changeZhaiquFenyeSizeChange(val) {
      this.zhaiquPage = 1;
      this.zhaiquSize = val;
      this.ysjtqGetShujuZhaiquDataListFn();
    },
    // 摘取数据的单向删除
    onZhaiquItemDeleteFn(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await this.ysjtqRemoveTableItemFn("1", item.extractId);
        this.zhaiquPage = 1;
        this.ysjtqGetShujuZhaiquDataListFn();
      });
    },
    // 摘取数据table的多选check
    handleZhaiquTableSelectionChangeFn(val) {
      this.currentZhaiquTableItemArray = val;
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~原始数据栏修改表头弹窗~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 修改原始数据表头的弹窗取消
    onEditHeaderDialogCancelFn() {
      this.editTableHeaderDialogFlag = false;
    },
    // 修改原始数据表头的弹窗 保存
    onEditHeaderDialogSaveFn() {
      this.ysjtqShujuTableHeaderValueFn();
    },
    // 修改表头-弹窗显示
    onEditTableHeaderFn() {
      if (this.shujuTableOptions.length) {
        this.shujuTableOptions = this.shujuTableOptions.map((item) => {
          return { ...item, newValue: item.columnName };
        });
        this.editTableHeaderDialogFlag = true;
      } else {
        this.$message({
          message: "请先导入文件构建数据表格~",
          type: "warning",
        });
      }
    },
    // 修改原始数据表头
    async ysjtqShujuTableHeaderValueFn() {
      console.log(this.shujuTableOptions);
      let data = {
        importDataTableId: this.currentLeftListItem.id,
        updateImportColumns: this.shujuTableOptions.map((item) => {
          return {
            dataColumnId: item.dataColumnId,
            columnName: item.columnName,
            newColumnName: item.newValue,
          };
        }),
      };
      let res = await this.$api.ysjtqShujuTableHeaderValueApi(data);
      if (res.code === 200) {
        this.$message({
          message: "修改成功~",
          type: "success",
        });
        this.editTableHeaderDialogFlag = false;
        this.ysjtqGetTableListFn(true);
      }
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~原始数据导出弹窗~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 开始导出
    async startDaochuFn() {
      if (this.isClickDaochuType === "shuju") {
        await this.daochuShujuSubmitFn();
      } else if (this.isClickDaochuType === "zhaiqu") {
        await this.daochuZhaiquSubmitFn();
      }
    },
    aaa() {
      this.daochuShujukuType = "1";
      this.notChange = false;
    },
    cancelDaochuFn() {
      this.notChange = false;
      this.daochuShujukuType = "1";
      this.daochuType = "1";
      this.daochuDialogFlag = false;
    },
    // 数据的导出  - 本地
    async daochuShujuSubmitFn() {
      let dataIds = this.currentShujuTableItemArray.map((item) => {
        return item.id;
      });
      if (dataIds) {
        let blobRes = await this.ysjtqCheckItemDaochuLocationFn(
          "0",
          this.currentLeftListItem.id,
          dataIds
        );
        fileDaoChuUtils(blobRes, "原始数据导出表.xlsx");
        this.$message({
          message: "导出成功",
          type: "success",
        });
        this.daochuDialogFlag = false;
      }
    },
    // 摘取的导出 （本地和数据库）
    async daochuZhaiquSubmitFn() {
      // 摘取的导出  - 本地
      if (this.daochuType === "1") {
        let dataIds = this.currentZhaiquTableItemArray.map((item) => {
          return item.extractId;
        });
        if (dataIds) {
          let blobRes = await this.ysjtqCheckItemDaochuLocationFn(
            "1",
            this.currentLeftListItem.id,
            dataIds
          );
          fileDaoChuUtils(blobRes, "摘取数据导出表.xlsx");
          this.$message({
            message: "导出成功",
            type: "success",
          });
          this.daochuDialogFlag = false;
        }
      } else if (this.daochuType === "2") {
        if (this.daochuShujukuType === "1") {
          await this.ysjtqDaochuZhaiquShujuGoBiaoDataFn();
        } else if (this.daochuShujukuType === "2") {
          await this.ysjtqDaochuZhaiquShujuGoNewBiaoDataFn();
        }
      }
    },
    // 摘取导出结果到表
    async ysjtqDaochuZhaiquShujuGoBiaoDataFn() {
      if (this.currentTreeItem) {
        let data = {
          importTableId: this.currentTreeItem.dataTableId,
          dataIds: this.currentZhaiquTableItemArray.map((item) => {
            return item.extractId;
          }),
          operationType: "1",
        };
        let res = await this.$api.ysjtqDaochuZhaiquShujuGoBiaoDataApi(data);
        if (res.code === 200) {
          this.$message({
            message: res.result,
            type: "success",
          });
          this.daochuDialogFlag = false;
        }
      } else {
        this.$message({
          message: "请先选择并确认导入的表~",
          type: "warning",
        });
      }
    },
    // 摘取结果导出到新表
    async ysjtqDaochuZhaiquShujuGoNewBiaoDataFn() {
      if (this.currentTreeItem) {
        let data = {
          dataTypeId: this.currentTreeItem.dataTypeId,
          databaseType: this.currentTreeItem.databaseType,
          extractIds: this.currentZhaiquTableItemArray.map((item) => {
            return item.extractId;
          }),
          tableName: this.currentTreeItem.dataTypeName,
        };
        let res = await this.$api.ysjtqDaochuZhaiquShujuGoNewBiaoDataApi(data);
        if (res.code === 200) {
          this.$message({
            message: "导出到数据库成功~",
            type: "success",
          });
          this.daochuDialogFlag = false;
        }
      } else {
        this.$message({
          message: "请先选择并确认导入的表~",
          type: "warning",
        });
      }
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~原始和摘取的公共接口~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 查询数据分页表头 （原始和摘取）
    async ysjtqGetTableHeaderRowFn(id, type) {
      let params = {
        importDataTableId: id,
        isExtractAfter: type, //0为原始 1为摘取
      };
      let res = await this.$api.ysjtqGetTableHeaderRowApi(params);
      let newArray11 = res.result.sort((a, b) => {
        return a.columnIndex - b.columnIndex;
      });
      return newArray11;
    },
    // 获取表单数据 （原始和摘取）
    async ysjtqGetTableListDataFn(
      importDataTableId,
      isExtractAfter,
      pageNum,
      pageSize
    ) {
      let params = {
        importDataTableId,
        isExtractAfter, //0是原始 1是摘取
        pageNum,
        pageSize,
      };
      let res = await this.$api.ysjtqGetTableListDataApi(params);
      return res;
    },
    // 勾选数据导出到本地  （原始和摘取）
    async ysjtqCheckItemDaochuLocationFn(
      isExtractAfter,
      importDataTableId,
      dataIds
    ) {
      let data = {
        isExtractAfter,
        importDataTableId,
        dataIds,
      };
      let res = await this.$api.ysjtqCheckItemDaochuLocationApi(data);
      return res;
    },
    // 删除单一item （原始和摘取）
    async ysjtqRemoveTableItemFn(isExtractAfter, dataId) {
      let parmas = {
        isExtractAfter,
        dataId,
      };
      let res = await this.$api.ysjtqRemoveTableItemApi(parmas);
      if (res.code === 200) {
        this.$message({
          message: "删除成功~",
          type: "success",
        });
      } else {
        this.$message({
          message: res.message,
          type: "fail",
        });
      }
    },
    // 导出按钮---弹窗展示(原始和摘取的)
    onDaochuDialogFn(str) {
      this.isClickDaochuType = str;
      this.daochuType = "1";
      this.daochuShujukuType = "1";
      this.currentTreeItem = null;
      if (str === "shuju") {
        if (!this.currentShujuTableItemArray.length) {
          this.$message.warning("请先勾选要导出的数据~");
          return;
        }
      } else if (str === "zhaiqu") {
        if (!this.currentZhaiquTableItemArray.length) {
          this.$message.warning("请先勾选要导出的数据~");
          return;
        }
      }
      this.daochuDialogFlag = true;
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~元数据摘取弹窗 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 获取摘取弹窗的list
    async ysjtqGetZhaiquDialogListFn() {
      let res = await this.$api.ysjtqGetZhaiquDialogListApi();
      if (res.code === 200) {
        let newArr = [];
        for (let key in res.result) {
          newArr.push({
            id: `${key}--${new Date().getTime()}`,
            name: `${key}数据`,
            isPush: newArr.length ? false : true,
            childern: res.result[key].map((item) => {
              return { id: item.metadataDictyTableId, isCheck: false, ...item };
            }),
          });
        }
        this.zhaiquDialogList = newArr;
      }
    },
    // 元数据摘取--弹窗显示
    onYuanshujuDialogFn() {
      if (this.currentShujuTableItemArray.length) {
        this.daochuDialogFlag1 = true;
        this.zhaiquDialogLoadStatus = "";
        // console.log(this.currentShujuTableItemArray)
      } else {
        this.$message({
          message: "请勾选需要摘取的数据~",
          type: "warning",
        });
      }
    },
    // 摘取弹窗取消
    zhaiquDialogCancelFn() {
      this.zhaiquDialogFlag = false;
    },
    // 摘取弹窗提交
    async zhaiquDialogSubmitFn(rs) {
      console.log(rs);
      // let currentItem = this.getYuanshujuZhaiquDialogCheckItemFn();
      this.zhaiquDialogLoadStatus = "ing";
      if (rs?.dataTableId) {
        let extractDataId = this.currentShujuTableItemArray.map((item) => {
          return item.id;
        });
        let data = {
          metadataDictyTableId: rs?.dataTableId,
          extractDataId,
        };
        console.log(data);
        this.$api.ysjtqShujuZhaiquApi(data).then(
          (res) => {
            if (res.code === 200) {
              console.log(res);
              this.zhaiquDialogLoadStatus = "succ";
              this.daochuDialogFlag1 = false;
              this.$message({
                message: "摘取数据成功~",
                type: "success",
              });
              this.ysjtqGetShujuZhaiquDataListFn(true);
            } else {
              this.zhaiquDialogLoadStatus = "fail";
            }
          },
          (err) => {
            this.zhaiquDialogLoadStatus = "fail";
          }
        );
      } else {
        this.$message({
          message: "请先勾选数据类型~",
          type: "warning",
        });
        this.zhaiquDialogLoadStatus = "";
      }
    },
    // 获取元数据摘取勾选的那个item
    getYuanshujuZhaiquDialogCheckItemFn() {
      let arr = this.zhaiquDialogList
        .map((item) => {
          return item.childern;
        })
        .flat();
      let checkItem = arr.filter((item) => {
        return item.isCheck;
      });
      return checkItem[0] || "";
    },
    // 元数据摘取弹窗关闭的重置数据
    resetZhaiquDialogDataFn() {
      this.zhaiquDialogList = this.zhaiquDialogList.map((item, index) => {
        item.isPush = index === 0;
        item.childern = item.childern.map((item2) => {
          return { ...item2, isCheck: false };
        });
        return item;
      });
      this.zhaiquDialogLoadStatus = "";
    },
    // 元数据摘取的总项的clss
    onZhaiquZongActClassFn(list) {
      let checkItemLen = 0;
      list.childern.forEach((item) => {
        if (item.isCheck) {
          checkItemLen += 1;
        }
      });
      if (checkItemLen === list.childern.length) {
        return "allCheck";
      } else if (checkItemLen > 0 && checkItemLen < list.childern.length) {
        return "hasItem";
      } else {
        return "";
      }
    },
    // 元数据摘取-总的 --  多选打开单选注释
    onCheckoutZhaiquListFn(ele) {
      // let sumList = JSON.parse(JSON.stringify(this.zhaiquDialogList))
      // let newSumList = sumList.map(item => {
      //   if (ele.id === item.id) {
      //     let flag = item.childern.some(item => {
      //       return item.isCheck
      //     })
      //     item.childern = item.childern.map(item2 => {
      //       return { ...item2, isCheck: !flag }
      //     })
      //   } else {
      //     item.childern = item.childern.map(item2 => {
      //       return { ...item2, isCheck: false }
      //     })
      //   }
      //   return item
      // })
      // this.zhaiquDialogList = newSumList
    },
    // 元数据摘取子集分的
    onCheckoutZhaiquItemFn(list, checkItem) {
      // 多选逻辑 ~~~~~~~~~
      // let sumList = JSON.parse(JSON.stringify(this.zhaiquDialogList))
      // let newSumList = sumList.map(item => {
      //   if (list.id === item.id) {
      //     item.childern = item.childern.map(item2 => {
      //       if (item2.id === checkItem.id) {
      //         item2.isCheck = !item2.isCheck
      //       }
      //       return item2
      //     })
      //   } else {
      //     item.childern = item.childern.map(item2 => {
      //       return { ...item2, isCheck: false }
      //     })
      //   }
      //   return item
      // })
      // this.zhaiquDialogList = newSumList
      // 单选逻辑~~~~~~~~~~~~~~~~~
      let sumList = JSON.parse(JSON.stringify(this.zhaiquDialogList));
      let newSumList = sumList.map((item) => {
        if (list.id === item.id) {
          item.childern = item.childern.map((item2) => {
            item2.isCheck = item2.id === checkItem.id;
            return item2;
          });
        } else {
          item.childern = item.childern.map((item2) => {
            return { ...item2, isCheck: false };
          });
        }
        return item;
      });
      this.zhaiquDialogList = newSumList;
    },
    // 元数据摘取list的点击展开收起
    isPushListContentFn(checkList) {
      let sumList = JSON.parse(JSON.stringify(this.zhaiquDialogList));
      let newSumList = sumList.map((item) => {
        if (checkList.id === item.id) {
          item.isPush = true;
        } else {
          item.isPush = false;
        }
        return item;
      });
      this.zhaiquDialogList = newSumList;
    },
    // ！！！！！！！！！！！！！！！！！！！！

    // 树节点点击事件
    shujutreeNodeClickFn(data, node) {
      // 选择的表的那一层
      if (node.level === 3) {
        this.currentTreeItem = data;
      } else {
        this.currentTreeItem = null;
      }
    },
    // 树的懒加载
    async loadNodeFn(node, resolve) {
      if (node.level === 0) {
        await this.ysjtqGetDaochuShujukuTree1Fn();
        return resolve(this.shujukuTreeData);
      } else if (node.level === 1) {
        return resolve(node.data.dataTypeVoList);
      } else if (node.level === 2) {
        console.log(node.data);
        let list = await this.ysjtqGetDaochuShujukuTree2Fn(
          node.data.databaseType,
          node.data.dataTypeId
        );
        return resolve(list);
      }
    },
    // 获取数据库tree-1
    async ysjtqGetDaochuShujukuTree1Fn() {
      let res = await this.$api.ysjtqGetFileTypeApi(2); // ysjtqGetDaochuShujukuTree1Api
      this.shujukuTreeData = res.result.map((item) => {
        return {
          ...item,
          dataTypeName: item.databaseTypeName,
          databaseType: item.databaseType,
        };
      });
      console.log(this.shujukuTreeData);
    },
    // 获取数据库tree-3
    async ysjtqGetDaochuShujukuTree2Fn(databaseType, dataTypeId) {
      let params = {
        databaseType,
        dataTypeId,
      };
      console.log(params);
      let res = await this.$api.ysjtqGetDaochuShujukuTree2Api(params);
      return res.result.map((item) => {
        return {
          ...item,
          dataTypeName: item.dataTableName,
          databaseType: item.databaseType,
          leaf: true,
        };
      });
    },
    // 新建表
    appendTreeNodeFn(data) {
      this.$prompt("请输入新建的文件夹名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.+$/,
        inputErrorMessage: "新建的文件夹名称不能为空~",
      })
        .then(({ value }) => {
          const newChild = {
            id: new Date().getTime(),
            dataTypeName: value,
            databaseType: data.databaseType,
            dataTypeId: data.dataTypeId,
            leaf: true,
          };
          if (!data.dataTypeVoList) {
            this.$set(data, "dataTypeVoList", []);
          }
          data.dataTypeVoList.push(newChild);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0;
        this.tableHDaoRu = 0;
        resolve();
      });
    },
    fetTableHeight() {
      this.resetHeight().then((res) => {
        this.tableH =
          this.$refs.shujuContent.getBoundingClientRect().height - 136;
        console.log("111111111", this.$refs.daoRutable);
        this.tableHDaoRu =
          this.$refs.daoRutable.getBoundingClientRect().height - 48;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination__rightwrapper {
  display: flex;
  align-items: center;
}
.shujutiqu_wrap {
  width: 100%;
  height: 100%;
  display: flex;

  .left_wrap {
    flex: 0 0 auto;
    width: 400px;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #02fff4;
    background: rgba(2, 82, 107, 0.6);
    display: flex;
    flex-direction: column;

    .left_list_wrap {
      box-sizing: border-box;
      padding: 20px;
      flex: 1 1 auto;
      height: 0;
      overflow: hidden;

      .left_list {
        width: 100%;
        height: 100%;
        overflow: auto;

        .list_item {
          width: 100%;
          margin-bottom: 10px;
          cursor: pointer;

          .list_item_sum {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            background: rgba(0, 94, 123, 0.7);
            box-shadow: inset 0px 0px 25px 1px #02fff4;
            border: 1px solid #02fff4;
            box-sizing: border-box;
            padding: 0 20px;

            .item_name {
              font-size: 18px;
              color: #fff;
              font-weight: 700;
            }
          }

          .sqr {
            width: 22px;
            height: 22px;
            border: 2px solid #02fff4;
            margin-right: 14px;
            position: relative;

            &.act {
              &::after {
                background-color: #02fff4;
              }
            }

            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background-color: transparent;
              top: 50%;
              left: 50%;
              position: absolute;
              transform: translate(-50%, -50%);
            }
          }

          .sm_list {
            .sm_list_item {
              width: 100%;
              height: 50px;
              display: flex;
              align-items: center;
              background: rgb(3, 23, 34, 0.9);
              border-radius: 0px 0px 0px 0px;
              border: 1px solid #02fff4;
              box-sizing: border-box;
              padding: 0 20px;
              margin: 6px 0;

              .sm_item_name {
                font-size: 18px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .right_wrap {
    flex: 1 1 auto;
    width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;

    .shuju_content,
    .zhaiqu_content {
      width: 100%;
      flex: 1 1 auto;
      height: 0;
      box-sizing: border-box;
      border: 1px solid #02fff4;
      background: rgba(2, 82, 107, 0.6);
      display: flex;
      flex-direction: column;

      .shuju_table_wrap,
      .zhaiqu_table_wrap {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
        box-sizing: border-box;
        padding: 20px 20px 12px;
        display: flex;
        flex-direction: column;

        .shuju_table,
        .zhaiqu_table {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
          .caozuo_btns {
            font-weight: 700;
            color: #02fff4;
            font-size: 24px;

            .icon {
              margin: 0 5px;
              cursor: pointer;

              &:hover {
                opacity: 0.7;
              }
            }
          }
        }

        .shuju_fenye,
        .zhaiqu_fenye {
          flex: 0 0 auto;
          width: 100%;
          margin-top: 8px;

          .pageBox {
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .bin_fenyeqi {
              display: block !important;
              width: 100%;
            }

            .pageInfo {
              height: 18px;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              text-align: center;
              font-style: normal;
              text-transform: none;

              .size {
                color: #02fff4;
              }
            }
          }
        }
      }
    }

    .zhaiqu_content {
      margin-top: 15px;
    }
  }

  .common_title {
    flex: 0 0 auto;
    width: 100%;
    line-height: 58px;
    border-bottom: 1px solid #02fff4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: rgba(2, 255, 244, 0.15);

    .common_title_name {
      font-size: 20px;
      color: #fff;
      line-height: 58px;
      font-size: 20px;
      padding-left: 12px;
      position: relative;
      font-weight: 700;

      &::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 20px;
        background-color: #02fff4;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .common_title_btns {
      display: flex;
      align-items: center;

      .title_btn_item {
        .calcImport {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/expot.png") center center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }

        .clearImport {
          text-indent: 24px;
          position: relative;
          margin-left: 8px;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/qingkongbeifen.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }

        .addBtnexport {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/exporticon.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }

        .new_icon_imp {
          text-indent: 24px;
          position: relative;
          margin: 0 14px;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/yuanshujuzhaiqu_icon.png") center
              center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }
      }
    }
  }
  // 导入弹窗
  .daoru_dialog {
    ::v-deep .el-dialog {
      height: 82vh;
      .el-dialog__body {
        height: 91%;
        box-sizing: border-box;
        padding: 30px 20px;
        max-height: 91%;
        min-height: 91%;
        .daoru_dialog_content {
          height: 100%;
          .search_wrap {
            display: flex;
            align-items: center;

            .search_item {
              flex: 1 1 auto;
              width: 0;
              display: flex;
              align-items: center;
              &:nth-child(even) {
                margin: 0 20px;
              }
              .name {
                flex: 0 0 auto;
                width: 90px;
                font-size: 18px;
                color: #fff;
              }
              .ipt {
                flex: 1 1 auto;
                width: 0;
              }
            }

            .search_btn {
              flex: 0 0 auto;
            }
          }

          .dialog_table_wrap {
            margin-top: 10px;
            height: 89%;
          }

          .dialog_fenye_wrap {
            margin-top: 12px;

            .pageBox {
              height: 45px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .pageInfo {
                height: 18px;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 18px;
                color: #ffffff;
                text-align: center;
                font-style: normal;
                text-transform: none;

                .size {
                  color: #02fff4;
                }
              }
            }
          }

          .dialog_main_btns {
            display: flex;
            align-items: center;
            justify-content: center;
            // margin-top: 50px;
          }
        }
      }
    }
  }
  .edit_header_dialog {
    ::v-deep .el-dialog {
      height: 82vh;
      .el-dialog__body {
        height: 91%;
        box-sizing: border-box;
        padding: 30px 20px;
        max-height: 91%;
        min-height: 91%;
        .edit_header_table_wrap {
          .edit_header_table_content {
            .header_item {
              display: flex;
              align-items: flex-start;
              color: #fff;
              margin-bottom: 20px;
              font-size: 18px;

              .header_item_name {
                flex: 0 0 auto;
                width: 120px;
                line-height: 24px;
                text-align: right;
              }

              .header_item_ctr {
                flex: 0 0 auto;
                margin: 0 40px;
                line-height: 24px;
              }

              .header_ipt {
                flex: 1 1 auto;
                width: 0;
              }
            }
          }

          .edit_btns_wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
          }
        }
      }
    }
  }

  .zhaiqu_dialog_wrap {
    .zhaiqu_dialog_title {
      font-size: 18px;
      color: #fff;
      padding: 40px 30px 20px;
      box-sizing: border-box;
    }

    .zhaiqu_dialog_main {
      box-sizing: border-box;
      padding: 0 30px;

      .zhaiqu_list {
        width: 100%;
        height: 50px;
        overflow: hidden;
        margin-bottom: 5px;

        &.push_box {
          height: auto;
        }

        &.allCheck {
          .zhaiqu_list_zong {
            .zong_left {
              .sqr {
                &::after {
                  background-color: #02fff4;
                }
              }
            }
          }
        }

        &.hasItem {
          .zhaiqu_list_zong {
            .zong_left {
              .sqr {
                &::after {
                  background-color: #02fff4;
                  height: 6px;
                }
              }
            }
          }
        }

        .zhaiqu_list_zong {
          width: 100%;
          height: 50px;
          background: #12384e;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #02fff4;
          box-sizing: border-box;
          padding: 0 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .zong_left {
            display: flex;
            align-items: center;

            .sqr {
              width: 22px;
              height: 22px;
              border: 1px solid #02fff4;
              margin-right: 16px;
              cursor: pointer;
              position: relative;

              &:hover {
                opacity: 0.8;
              }

              &::after {
                content: "";
                width: 12px;
                height: 12px;
                background-color: transparent;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }

            .name {
              font-size: 16px;
              font-weight: 700;
              color: #fff;
            }
          }

          .zong_right {
            .icon {
              color: #02fff4;
              font-size: 24px;
            }
          }
        }

        .zhaiqu_list_content {
          max-height: 240px;
          overflow: auto;

          .zhaiqu_list_item {
            width: 100%;
            height: 50px;
            box-sizing: border-box;
            background: #031722;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #02fff4;
            margin: 5px 0;
            padding: 0 28px;
            display: flex;
            align-items: center;

            &.actItem {
              .sqr {
                &::after {
                  background-color: #02fff4;
                }
              }
            }

            .sqr {
              width: 22px;
              height: 22px;
              border: 1px solid #02fff4;
              margin-right: 16px;
              cursor: pointer;
              position: relative;

              &:hover {
                opacity: 0.8;
              }

              &::after {
                content: "";
                width: 12px;
                height: 12px;
                background-color: transparent;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }

            .name {
              font-size: 16px;
              color: #fff;
            }
          }
        }
      }
    }

    .zhaiqu_dialog_btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50px 0 30px;
    }

    .zhaiqu_dialog_load {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 40px;
      border-top: 1px solid #02fff4;

      .load_item {
        width: 100%;
        height: 44px;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-sizing: border-box;

        &.load_ing {
          box-shadow: inset 0px 0px 20px 1px #02fff4;
          background: rgba(0, 105, 138, 0.3);
          border-color: rgba(2, 255, 244, 0.5);
          color: #02fff4;

          .icon {
            margin-right: 6px;
            font-weight: 700;
          }
        }

        &.load_succ {
          box-shadow: inset 0px 0px 20px 1px #26da9f;
          background-color: rgba(34, 154, 110, 0.3);
          border-color: #07cd8c;
          color: #26da9f;
        }

        &.load_fail {
          box-shadow: inset 0px 0px 20px 1px #c7002f;
          background-color: rgba(199, 0, 47, 0.3);
          border-color: rgba(199, 0, 47, 0.5);
          color: #c7002f;
        }

        &.hide {
          display: none;
        }
      }
    }
  }

  .yuandata_dialog {
    ::v-deep .el-dialog {
      height: 82vh;
      .el-dialog__body {
        // padding: 0;
        height: 91%;
        box-sizing: border-box;
        max-height: 91%;
        min-height: 91%;
      }
    }
  }

  .daochu_wrap {
    .daochu_type,
    .daochu_shujuku_type {
      display: flex;
      align-items: center;
      margin-bottom: 32px;

      .type_title {
        font-size: 18px;
        color: #fff;
        width: 110px;
      }
    }

    .daochu_shujuku_wrap {
      .daochu_shujuku_main {
        display: flex;

        .shujuku_tree_title {
          flex: 0 0 auto;
          font-size: 18px;
          color: #fff;
          width: 110px;
        }

        .shujuku_tree_wrap {
          flex: 1 1 auto;
          width: 0;
          height: 340px;
          border: 1px solid #02fff4;
          overflow: hidden;
          padding: 20px;

          .bin_tree_main {
            width: 100%;
            height: 100%;
            overflow: auto;
          }
        }
      }
    }

    .daochu_btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 70px;
    }
  }

  .database {
    width: 100%;
    height: 100%;
    background: url("../../../assets/big_bg.png") center center no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 85px;
    position: relative;
    display: flex;

    .top_header_wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .router_view {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 18px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
